<template>
  <div class="home-box">
    <div>
      <card width="100%" class="home-header" margin="0 0 16px 0">
        <small-card
          title="超市总数"
          color="#12C47B"
          :icon="supermarket"
          :num="20"
          unit="家"
          :border="false"
        />
        <small-card
          title="收银机总数"
          color="#FF6A68"
          :icon="cashiers"
          :num="131"
          unit="台"
        />
        <small-card
          title="今日营业额"
          color="#F6D14F"
          :icon="turnover"
          :num="1032.59"
          unit="元"
          :decimals="true"
        />
        <small-card
          title="今日订单数"
          color="#4B63E7"
          :icon="order"
          :num="145"
          unit="单"
        />
        <small-card
          title="总营业额"
          color="#52CCFE"
          :icon="cashs"
          :num="10324.69"
          unit="万元"
          :decimals="true"
        />
        <small-card
          title="总订单数"
          color="#F28753"
          :icon="numOrder"
          :num="208"
          unit="万单"
        />
        <div class="home-wave"></div>
      </card>
    </div>
    <div>
      <card
        width="calc(50% - 8px)"
        height="362px"
        margin="0 16px 16px 0"
        title="总营业额统计"
      >
        <barEcharts />
      </card>
      <card
        width="calc(50% - 8px)"
        height="362px"
        margin="0 0 16px 0"
        title="分类营业额统计图"
      >
        <pieEcharts />
      </card>
    </div>
    <div>
      <card width="100%" height="362px" margin="0" title="近20天销售趋势图">
        <lineEcharts />
      </card>
    </div>
  </div>
</template>

<script>
import card from "./components/card/index";
import smallCard from "./components/card/smallCard";

import supermarket from "@/assets/supermarket.png";
import cashiers from "@/assets/cashiers.png";
import cashs from "@/assets/cashs.png";
import numOrder from "@/assets/numOrder.png";
import order from "@/assets/order.png";
import turnover from "@/assets/turnover.png";

import barEcharts from "./echarts/barEcharts";
import pieEcharts from "./echarts/pieEcharts";
import lineEcharts from "./echarts/lineEcharts";

export default {
  components: {
    card,
    smallCard,
    barEcharts,
    pieEcharts,
    lineEcharts,
  },
  data() {
    return {
      supermarket,
      cashiers,
      cashs,
      numOrder,
      order,
      turnover,
    };
  },
};
</script>

<style lang="less" scoped>
.home-box {
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  background: #eff4fb;
  position: relative;
  top: -16px;
  left: -16px;
  .home-header {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  .home-wave {
    background: url("../../assets/wave.png") no-repeat bottom;
    background-size: 100% 40px;
    position: absolute;
    width: calc(100% + 48px);
    height: 50px;
    bottom: -16px;
    left: -32px;
  }
}
</style>
